<template>

	<view class="signup">
		<view class="item-container" @tap="goRouter(item.contractId)" v-for="(item, index) of houseRecommendList"
			:key="index">
			<!-- 图片 -->
			<image class="item-image" :src="item.image[0]" mode="aspectFill"></image>

			<div class="left-item">
				<!-- 标题 -->
				<view class="item-title">{{ item.contractType }}</view>

				<!-- 描述 -->
				<view class="item-description">{{ item.description }}</view>

				<!-- 地址 -->
				<view class="item-address">{{ item.address }}</view>

				<!-- 特点 -->
				<view class="item-feature-box">
					<!-- <view class="item-feature" v-for="(feature, index) in item.features" :key="index">
					{{feature}}
				</view> -->
					<view class="item-feature">
						{{ item.nature }}
					</view>
					<view class="item-feature">
						{{ item.usageArea }}m²
					</view>
				</view>

				<!-- 价格 -->
				<view class="item-buttom">
					<view class="item-price">{{ item.price }}</view>
					<view class="item-unit">元/月</view>
				</view>
			</div>

			<!-- 分割线 -->
			<view class="item-divider"></view>

		</view>
		<view class="loading-text">
			{{ finish ? '没有更多数据~' : '正在加载...' }}
		</view>
	</view>

</template>

<script setup lang="ts">
	import { getHomehouseRecommendListAPI } from '../../services/home'
	import type { HouseDetailsPage,PageParams } from '/@/types/global'
	import { onMounted, ref } from 'vue'


	// // 分页参数
	const pageParams : Required<PageParams> = {
		pageNum: 1,
		pageSize: 6,
	}

	const houseRecommendList = ref<HouseDetailsPage[]>([])
	// 已结束标记
	const finish = ref(false)
	// // 获取推荐房源数据
	const getHomehouseRecommendListData = async () => {
		// 退出分页判断
		if (finish.value === true) {
			return uni.showToast({ icon: 'none', title: '没有更多数据~' })
		}

		const res = await getHomehouseRecommendListAPI(pageParams)

		// // 数组追加
		houseRecommendList.value.push(...res.data.list)

		// 分页条件
		if (res.data.list.length === pageParams.pageSize) {
			// 页码累加
			pageParams.pageNum++
		} else {
			finish.value = true
		}
	}
	// // 重置数据
	const resetData = () => {
		pageParams.pageNum = 1
		houseRecommendList.value = []
		finish.value = false
	}
	// // 组件挂载完毕
	onMounted(() => {
		getHomehouseRecommendListData()
	})
	// // 暴露方法
	defineExpose({
		resetData,
		getMore: getHomehouseRecommendListData,
	})
	const goRouter = (contractId : number) => {
		console.log(contractId)
		uni.navigateTo({
			url: `/pages/contract/contractDetail?contractId=${contractId}`
		})

	}
</script>

<style scoped lang="scss">
	.signup {
		height: 100%;
	}

	.item-container {
		width: 345px;
		height: 136px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item-image {
		width: 130px;
		height: 90px;
		margin-right: 10px 0px;
		border-radius: 5px;
		margin-right: 10px;
		margin-left: 10px;
	}

	.item-address {
		display: flex;
	}

	.item-title {

		color: #333333;
		font-size: 16px;
		line-height: 20px;

	}

	.item-description {
		font-size: 12px;
		color: #666;
		margin-bottom: 10px;
	}

	.item-address {
		font-size: 12px;
		color: #666;
		margin-bottom: 5px;
	}

	.item-feature-box {
		display: flex;
	}

	.item-feature {
		font-size: 11px;
		color: rgba(76, 95, 163, 0.698039215686274);
		line-height: 15px;
		width: 50px;
		text-align: center;
		margin: 0 5px;
		background-color: #edeff6;
	}

	.item-buttom {
		display: flex;
	}

	.item-price {
		font-size: 16px;
		color: #f00;
		margin-bottom: 5px;
	}

	.item-unit {
		font-size: 12px;
		color: #666;
	}

	.item-divider {
		border-top: 1px solid #eee;
		margin-top: 5px;
	}

	// 加载提示文字
	.loading-text {
		text-align: center;
		font-size: 28rpx;
		color: #666;
		padding: 20rpx 0;
	}
</style>